<template>
    <form @submit.prevent="handleSubmit">
        <div v-for="(prop, propIndex) in inputProperties" :key="propIndex" class="form-group">
            <label>{{ prop.label }}</label>
            <template v-if="prop.type === 'input'">
                <input :value="prop.value" @input="updateValue(propIndex, $event.target.value)" :required="prop.required" class="form-control">
                <span v-if="prop.required" class="text-danger">*</span>
                <span v-if="prop.pattern && !isValid(propIndex, prop.pattern)" class="text-danger">输入格式不正确</span>
            </template>
            <template v-else-if="prop.type === 'codeEditor'">
                <div :id="'editor-' + propIndex" class="code-editor"></div>
                <span v-if="prop.required" class="text-danger">*</span>
            </template>
            <template v-else-if="prop.type === 'select'">
                <select :value="prop.value" @change="updateValue(propIndex, $event.target.value)" :required="prop.required" class="form-control">
                    <option v-for="(option, optionIndex) in prop.options" :key="optionIndex" :value="option.value">{{ option.label }}</option>
                </select>
                <span v-if="prop.required" class="text-danger">*</span>
            </template>
            <template v-else-if="prop.type === 'checkbox'">
                <input type="checkbox" :checked="prop.value" @change="updateValue(propIndex, $event.target.checked)" class="form-check-input">
            </template>
            <template v-else-if="prop.type === 'radio'">
                <div v-for="(radioOption, radioOptionIndex) in prop.options" :key="radioOptionIndex" class="form-check">
                    <input type="radio" :value="radioOption.value" :checked="prop.value === radioOption.value" @change="updateValue(propIndex, $event.target.value)" class="form-check-input">
                    <label class="form-check-label">{{ radioOption.label }}</label>
                </div>
            </template>
            <template v-else-if="prop.type === 'date'">
                <input type="date" :value="prop.value" @input="updateValue(propIndex, $event.target.value)" :required="prop.required" class="form-control">
                <span v-if="prop.required" class="text-danger">*</span>
            </template>
            <template v-else-if="prop.type === 'number'">
                <input type="number" :value="prop.value" @input="updateValue(propIndex, $event.target.value)" :required="prop.required" :min="prop.min" :max="prop.max" class="form-control">
                <span v-if="prop.required" class="text-danger">*</span>
                <span v-if="(prop.min || prop.max) && !isNumberValid(propIndex, prop.min, prop.max)" class="text-danger">输入范围不正确</span>
            </template>
        </div>
        <button type="submit" class="btn btn-primary">提交</button>
    </form>
</template>

<script>
import * as monaco from 'monaco-editor';

export default {
    props: {
        inputPresent: {
            type: String
        },
        settingsPresent: {
            type: String
        }
    },
    data() {
        return {
            inputProperties: [],
            editors: []
        };
    },
    created() {
        try {
            const inputJson = JSON.parse(this.inputPresent);
            const settingsJson = JSON.parse(this.settingsPresent);
            const inputProps = inputJson.properties;
            const settingsProps = settingsJson.properties;
            for (const key in inputProps) {
                const inputProp = inputProps[key];
                const settingsProp = settingsProps ? settingsProps[key] : {};
                let prop = {
                    label: inputProp.formConfig.i18n_label['zh-CN'],
                    type: inputProp.formConfig.type,
                    value: inputProp.defaultValue?.value,
                    required: inputProp.formConfig.required,
                    pattern: inputProp.formConfig.pattern,
                    min: inputProp.formConfig.min,
                    max: inputProp.formConfig.max
                };
                if (inputProp.formConfig.type === 'select' || inputProp.formConfig.type === 'radio') {
                    prop.options = [];
                    if (inputProp.formConfig.options) {
                        inputProp.formConfig.options.forEach(option => {
                            prop.options.push({
                                label: option.label,
                                value: option.value
                            });
                        });
                    }
                }
                this.inputProperties.push(prop);
            }
        } catch (error) {
            console.error('Error parsing inputPresent or settingsPresent:', error);
        }
    },
    mounted() {
        this.inputProperties.forEach((prop, propIndex) => {
            if (prop.type === 'codeEditor') {
                const editor = monaco.editor.create(document.getElementById('editor-' + propIndex), {
                    value: prop.value,
                    language: 'javascript'
                });
                editor.onDidChangeModelContent(() => {
                    this.updateValue(propIndex, editor.getValue());
                });
                this.editors.push(editor);
            }
        });
    },
    methods: {
        updateValue(propIndex, value) {
            this.inputProperties[propIndex].value = value;
        },
        isValid(propIndex, pattern) {
            const value = this.inputProperties[propIndex].value;
            const reg = new RegExp(pattern);
            return reg.test(value);
        },
        isNumberValid(propIndex, min, max) {
            const value = this.inputProperties[propIndex].value;
            if (min !== undefined && value < min) {
                return false;
            }
            if (max !== undefined && value > max) {
                return false;
            }
            return true;
        },
        handleSubmit() {
            // Handle form submission logic here
            console.log('Form submitted with values:', this.inputProperties);
        }
    }
};
</script>

<style>
.form-group {
    margin-bottom: 15px;
}
.form-control {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
}
.form-check {
    margin-bottom: 10px;
}
.text-danger {
    color: red;
}
.btn {
    margin-top: 20px;
}
.code-editor {
    height: 200px;
    border: 1px solid #ccc;
}
</style>